<template>
    <div>
        <el-button @click="$refs.popDialog.open()">打开弹窗</el-button>
    <Pop ref="popDialog">
      <template v-slot:title>当日实时目标列表</template>
      <template v-slot:content>
         <el-tree :data="depts" :props="defaultProps" default-expand-all>
        <template v-slot="{ data }">
          <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="12">{{ data.name }}</el-col>
            <el-col :span="12">
              <span class="tree-manager">{{ data.managerName || '' }}</span>
            </el-col>
          </el-row>
        </template>
      </el-tree>
      </template>
    </Pop>
     
    </div>
  </template>
  
  <script>
import { generateFlatTreeData, groupBy } from '../utils/data';

export default {
  data() {
    return {
      depts: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    };
  },
  mounted() {
    // 获取 generateFlatTreeData 生成的原始数据（对象）
        const result = generateFlatTreeData(100); // 示例生成 10 条数据
        const countries = result.countries;
        const flatData = result.data;       
    this.depts = this.transformToTree(countries, flatData);
    
    // console.log(result);
    
  },
  methods: {
    // 将原始数据转换为树状数组 第一级
    transformToTree(countries, flatData) {
      return countries.map(country => ({
        name: country.name,
        children: this.processAirlines(country.code, flatData)
        //子节点的countryCode和父节点的code相同，根据这个去找
      }));
    },
    // 处理航空公司层级
    processAirlines(countryCode, flatData) {
      const countryFiltered = flatData.filter(item => item.countryCode === countryCode);
      console.log('countryFiltered',countryFiltered);
      const airlineGroup = groupBy(countryFiltered, 'airline');
      console.log('airlineGroup',airlineGroup);
      return Object.entries(airlineGroup).map(([airlineName, airlineData]) => ({
        name: airlineName,
        children: this.processAircraftTypes(airlineData)
      }));
    },
    // 处理飞机类型层级
    processAircraftTypes(airlineData) {
      const typeGroup = groupBy(airlineData, 'aircraftTypes');
      return Object.entries(typeGroup).map(([typeName, typeData]) => ({
        name: typeName,
        children: typeData.map(item => ({
          name: item.regNum
        }))
      }));
    }
  }
};
</script>

  
  <style lang="scss" scoped>
  .app-container {
    padding: 10px;
    font-size: 14px;
  }
  .tree-manager {
    width: 50px;
    display: inline-block;
    margin: 10px;
  }
  </style>